<template>
    <div class="content-box">
        <!-- 搜索地址 -->
        <div class="search-container">
            <div class="input-container">
                <el-form :model="myForm" ref="myForm" label-width="85px" class="my-el-form">
                    <el-form-item label="车牌号：" prop="carLicense">
                        <el-input v-model="myForm.carLicense" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button-container">
                <el-button @click="handleReset('myForm')">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handAdd">+ 新增</el-button>
            </div>
        </div>
        <!-- 展示表格 -->
        <div class="container">
            <div class="table-container">
                <el-table ref="Table1" :data="list" style="width: 100%" border>
                    <el-table-column label="车场名称" align="center">
                        <template slot-scope="scope">{{ scope.row.parkingLotName }}</template>
                    </el-table-column>
                    <el-table-column label="车牌号码" align="center">
                        <template slot-scope="scope">{{ scope.row.carLicense }}</template>
                    </el-table-column>
                    <el-table-column label="生效时段" align="center" width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.prescription == 'IMMOBILIZATION'"
                                >{{ scope.row.startTime | dateOnly }}至{{ scope.row.endTime | dateOnly }}</span
                            >
                            <span v-else>永久生效</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建人" align="center">
                        <template slot-scope="scope">{{ scope.row.updateBy }}</template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" @click="deleteFun(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination-area">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10, 20, 50]"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 新增弹框 -->
        <el-dialog title="车辆信息" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="modalForm" class="myForm" :rules="modalRules" ref="modalForm" :label-width="formLabelWidth">
                <el-form-item label="车场名称：" prop="parkingLotId">
                    <el-select v-model="modalForm.parkingLotId" placeholder="请选择停车场">
                        <el-option
                            :label="item.parkingLotName"
                            :key="item.parkingLotId"
                            :value="item.parkingLotId"
                            v-for="item in parkListOpt"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车牌号码：" prop="carLicense">
                    <el-input maxlength="8" v-model="modalForm.carLicense" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="生效时段：" prop="prescription">
                    <el-radio-group v-model="modalForm.prescription" @change="changeTimeRadio">
                        <el-radio label="IMMOBILIZATION">固定时段</el-radio>
                        <el-radio label="FOREVER">永久生效</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="showTime" label="生效时间：" prop="effectTime">
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="modalForm.effectTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('modalForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { saveWhitelist, updWhitelist, whitelistPage,getByWhitelistIdDel } from '@/api/car';
import { parkList } from '@/api/park';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10
};
const userForm = {
    parkingLotId: '',
    carLicense: '',
    prescription: 'IMMOBILIZATION',
    effectTime: ""
};
export default {
    data() {
        return {
            modalRules: {
                parkingLotId: [{ required: true, message: '该项为必填项', trigger: 'blur' }],
                carLicense: [{ required: true, message: '该项为必填项' }],
                prescription: [{ required: true, message: '该项为必填项' }],
                effectTime: [{ required: true, message: '该项为必填项' }]
            },
            listQuery: Object.assign({}, defaultListQuery),
            list: [],
            total: 1,
            listLoading: true,
            myForm: {
                carLicense: ''
            },
            dialogFormVisible: false, //新增弹框
            modalForm: Object.assign({}, userForm),
            formLabelWidth: '100px',
            parkListOpt: [], //下拉选择
            showTime: true
        };
    },
    filters: {
        dateOnly(value) {
            return value.split(' ')[0];
        }
    },
    created() {
        this.getList();
        this.getParkList();
    },
    methods: {
        deleteFun(index, row){
            // 删除数据；
            this.$confirm('确认是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const result = await getByWhitelistIdDel({
                    whitelistId: row.whitelistId,
                });
                if (result.code == 200) {
                    this.$message.success('操作成功');
                     this.getList();
                } else {
                    this.$message.error(result.msg);
                }
            });
        },

        changeTimeRadio(e) {
            this.showTime = e == 'IMMOBILIZATION' ? true : false;
        },
        async handleSubmit(modalForm) {
            //保存按钮
            this.$refs[modalForm].validate(async (valid) => {
                if (valid) {
                    const params = {
                        whitelistId: this.modalForm.whitelistId,
                        parkingLotId: this.modalForm.parkingLotId,
                        carLicense: this.modalForm.carLicense,
                        prescription: this.modalForm.prescription
                    };
                    if (this.modalForm.prescription == 'IMMOBILIZATION') {
                        params.startTime = this.modalForm.effectTime[0];
                        params.endTime = this.modalForm.effectTime[1];
                    }
                    const result = this.modalForm.whitelistId ? await updWhitelist(params) : await saveWhitelist(params);

                    if (result.code == 200) {
                        this.$message.success('操作成功');
                        this.listQuery.pageNum = 1;
                        this.listQuery.pageSize = 20;
                        this.getList();
                    } else {
                        this.$message.info(result.msg);
                    }
                    this.dialogFormVisible = false;
                }
            });
        },
        handleUpdate(index, row) {
            // 编辑的时候回显
            this.modalForm = {
                parkingLotId: row.parkingLotId,
                carLicense: row.carLicense,
                prescription: row.prescription,
                whitelistId: row.whitelistId
            };
            if (row.prescription == 'IMMOBILIZATION') {
                const startTime = row.startTime.split(' ')[0];
                const endTime = row.endTime.split(' ')[0];
                // this.modalForm.effectTime = [,];         


                  this.$set(this.modalForm, "effectTime", [startTime,endTime ]);
                               
                this.showTime = true;
            } else {
                this.showTime = false;
                this.modalForm.effectTime = "";
            }

            this.dialogFormVisible = true;
        },
        handAdd() {
            //点击新增按钮，显示弹框

            this.dialogFormVisible = true;
            this.modalForm = Object.assign({}, userForm); //将内容设置为空
            this.$refs['modalForm'].resetFields();
        },
        handleSizeChange(val) {
            // 改变列表显示条数
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // 改变列表显示页数
            this.listQuery.pageNum = val;
            this.getList();
        },

        getList() {
            // 获取数据列表
            this.listLoading = true;
            whitelistPage(this.listQuery)
                .then((res) => {
                    this.listLoading = false;
                    this.list = res.data.records;
                    this.total = Number(res.data.total);
                })
                .catch((err) => {
                    this.listLoading = false;
                });
        },
        async getParkList() {
            const result = await parkList({
                pageNum: 1,
                pageSize: -1
            });
            // 获取数据列表
            this.parkListOpt = result.data.records;
        },
        handleReset(formName) {
            //重置选项
            this.$refs[formName].resetFields();
            this.listQuery = Object.assign({}, defaultListQuery); // 清空输入框内容
            this.getList(); // 刷新列表并初始化
        },
        
        handleSearch() {
            //搜索;
            this.listQuery.carLicense = this.myForm.carLicense;
            this.listQuery.pageNum = 1;
            this.getList();
        },
    }
};
</script>
<style scoped>
.myForm ::v-deep .el-form-item__content > div {
    width: 90%;
}
.button-container {
    padding-bottom: 15px;
}
</style>
